<template>
  <div class="container">
    <ProductHeader />
    <Swipe :autoplay="2000" indicator-color="white">
      <SwipeItem v-for="item in bannerList" :key="item.id">
        <VanImage :src="item.imgUrl" />
      </SwipeItem>
    </Swipe>
    <div class="price">
      <div>{{ prodInfo.skuInfo?.skuDesc }}</div>
      <span class="basic-price">￥{{ price }}</span>
      <!--      <span class="counter-price">￥{{ price?.counterPrice }}</span>-->
    </div>
    <div class="spmcBanner">
      <div class="spmcPrice">
        {{ prodInfo.spmcBanner?.spmcDesc }}--￥{{
          prodInfo.spmcBanner?.spmcPrice
        }}元
      </div>
      <div><span class="spmcBtn">开通</span></div>
    </div>
    <div class="main">
      <div class="name" style="font-weight: bold; margin: 10px 0">
        {{ prodInfo.skuInfo?.skuName }}
      </div>
      <span style="font-size: small">推荐理由</span>
      <!--      <div class="recommend-reason" style="margin: 10px 0">
        <div
          class="item"
          v-for="(item, index) in prodInfo.recommendReason"
          :key="index"
          style="font-size: small; background-color: #fafafa"
        >
          {{ item }}
        </div>
      </div>-->
    </div>
    <div class="tm-list" style="margin: 10px 0">
      <List>
        <Cell title="邮费" is-link @click="showPopup"> </Cell>
        <Popup
          v-model:show="showBottom"
          position="bottom"
          :style="{ height: '50%' }"
          closeable
          >邮费->购物返</Popup
        >
        <Cell title="购物返" is-link @click="showPopup"> </Cell>
      </List>
    </div>
    <div class="buy-info">
      <List>
        <Cell title="规格数量" is-link @click="showAttr = true"> </Cell>
        <Popup
          v-model:show="showAttr"
          position="bottom"
          :style="{ height: '80%' }"
          closeable
        >
          <Sticky>
            <div class="showattr-header">
              <VanImage
                width="100"
                height="100"
                :src="defaultSkuImg"
                style="display: inline-block; margin-right: 10px"
              ></VanImage>
              <span style="color: red">价格:￥{{ price }}</span>
              <div
                class="attr-list"
                v-for="(type, index) in prodInfo.spuSaleAttrList"
                :key="type.id"
              >
                <span class="type" style="display: block">{{
                  type.saleAttrName
                }}</span>
                <div
                  class="item"
                  v-for="(val, index) in type.spuSaleAttrValueList"
                  :key="val.id"
                  :class="{ active: val.isChecked === '1' }"
                  @click="changeAttr(type.id, val.id)"
                >
                  {{ val.saleAttrValueName }}
                </div>
              </div>
              <div class="counter">
                <span style="display: block">数量</span>
                <Stepper
                  v-model="skuNum"
                  integer
                  style="margin-top: 10px"
                ></Stepper>
              </div>
            </div>
          </Sticky>
        </Popup>
      </List>
    </div>
  </div>
  <div class="footer">
    <div class="left">
      <Icon name="service-o" size="30" style="line-height: 60px"></Icon>
    </div>
    <div class="center">立即购买</div>
    <div class="right" @click="addShopCart">加入购物车</div>
  </div>
</template>

<script lang="ts">
import { defineComponent } from "vue";
export default defineComponent({
  name: "ProdDetail",
});
</script>

<script lang="ts" setup>
import { useRoute, useRouter } from "vue-router";
import { onMounted, ref, computed } from "vue";
import { reqGetProdDetail, reqAddShopCart } from "../../api/category";
import {
  Swipe,
  SwipeItem,
  Image as VanImage,
  List,
  Popup,
  Cell,
  Sticky,
  Stepper,
  Icon,
  showSuccessToast,
  showFailToast,
} from "vant";
import ProductHeader from "../../components/ProductHeader.vue";

const route = useRoute();
const router = useRouter();
const prodInfo = ref({});
const showBottom = ref(false);
const skuIdList = ref([12, 4, 11]);
const showAttr = ref(false);
const skuNum = ref(1);
const skuId = ref();
const getData = async () => {
  const index = getRandom(0, skuIdList.value.length - 1);
  const curSkuId = (skuId.value = skuIdList.value[index]);
  const res = await reqGetProdDetail(curSkuId);
  prodInfo.value = res.data;
};
// 计算轮播图列表
const bannerList = computed(() =>
  prodInfo.value.skuInfo?.skuImageList.map((item: any) => {
    item.imgUrl = item.imgUrl.replace(
      "http://47.93.148.192:8080",
      "http://39.98.123.211"
    );
    return item;
  })
);
// 计算价格
const price = computed(() => prodInfo.value.skuInfo?.price);
// 计算默认图片
const defaultSkuImg = computed(() =>
  prodInfo.value.skuInfo?.skuDefaultImg.replace(
    "http://47.93.148.192:8080",
    "http://39.98.123.211"
  )
);
onMounted(() => {
  getData();
});
// 随机数
const getRandom = (min: number, max: number) =>
  Math.floor(Math.random() * (max - min + 1)) + min;
//展示弹出框
const showPopup = () => {
  showBottom.value = true;
};
//改变售卖属性样式
const changeAttr = (typeId: number, valId: number) => {
  prodInfo.value.spuSaleAttrList.forEach((type: any) => {
    if (type.id === typeId) {
      type.spuSaleAttrValueList.forEach(
        (val: any) => (val.isChecked = val.id === valId ? "1" : "0")
      );
    }
  });
};
// 添加到购物车
const addShopCart = async () => {
  try {
    await reqAddShopCart(skuId.value, skuNum.value);
    showSuccessToast("添加购物车成功!");
  } catch (e) {
    showFailToast("添加失败!");
  }
};
</script>

<style scoped>
/*.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  line-height: 150px;
  text-align: center;
  !*background-color: #39a9ed;*!
}*/
.container .buy-info .showattr-header {
  margin: 20px 10px;
}
.container .price {
  background-color: red;
  color: white;
  /* height: 100px; */
  padding-left: 10px;
  overflow: hidden;
}
.container .price div {
  font-size: small;
  margin: 15px 0;
}
.container .price .basic-price {
  font-size: x-large;
  font-weight: bold;
}
.container .price .counter-price {
  text-decoration: line-through;
  font-weight: bold;
}
.container .spmcBanner {
  display: flex;
  justify-content: space-around;
  width: 80%;
  margin: 10px auto;
  background-color: #f3ca84;
  height: 30px;
  line-height: 30px;
  font-size: small;
}
.spmcBanner .spmcBtn {
  height: 20px;
  padding-left: 10px;
  padding-right: 10px;
  line-height: 20px;
  background: #12161c;
  font-size: 10px;
  text-align: center;
  color: #f3ca84;
  border-radius: 20px;
}
.container .main {
  width: 90%;
  margin: 10px auto;
}
.container .showattr-header .item {
  display: inline-block;
  border: 1px solid black;
  /* width: 60px; */
  margin: 5px;
  text-align: center;
  font-size: large;
}
.container .showattr-header .active {
  color: greenyellow;
  border: 1px solid greenyellow;
}
.container .showattr-header .counter {
  margin-top: 20px;
}
.footer {
  z-index: 5000;
  position: sticky;
  left: 0;
  bottom: 0;
  display: flex;
  justify-content: space-around;
  text-align: center;
  width: 100%;
}
.footer .left,
.footer .center {
  background: #fff;
}
.footer div {
  border: 1px solid gainsboro;
  width: 33%;
  height: 60px;
  line-height: 60px;
}
.footer .right {
  background-color: red;
  color: white;
}
</style>
